<template>
  <div class="cart">
    <Header title="购物车" :edit="true" />
    <CartDatail v-if="isShow" :changeShow="changeShow" />
    <Empty v-else />
   <Footer />
  </div>
</template>

<script>
import Footer from "../../components/Footer.vue"
import Empty from "../../components/Empty.vue"
import Header from "../../components/Header.vue"
import CartDatail from "./components/CartDatail.vue"
import {useStore} from 'vuex'
import {onMounted,ref} from 'vue'
export default {
  components:{
    Footer,
    Empty,
    Header,
    CartDatail
  },
  setup(){
    const isShow = ref(true)
    const store=useStore()

    const init=()=>{
      if(store.state.cartList.length === 0){
        isShow.value = false;
      }
    }

const changeShow=()=>{
  isShow.value=false
}
    onMounted(()=>{
      init();
    })

    return{
      isShow,store,changeShow
    }
  }
}
</script>


<style lang="less" scoped>
.cart{
  display: flex;
  flex-flow: column;
  height: 100%;
  .content{
    flex: 1;
    overflow-y: auto;
  }
}
</style>